useDebugValue
🧑🏻💻 useDebugValue
useDebugValue는 React 개발자 도구에서 커스텀 훅에 레이블을 추가해주는 React 훅이다.
✅ useDebugValue 문법
useDebugValue(value, format?)
value는 React 개발자 도구에서 표시하려는 값이다. 모든 유형을 가질 수 있다.useDebugValue는 아무것도 반환하지 않는다.
✅ 동작 원리
import { useDebugValue } from 'react';
function useOnlineStatus() {
// ...
useDebugValue(isOnline ? 'Online' : 'Offline');
// ...
}
- 커스텀 훅의 최상위 레벨에서
useDebugValue를 호출하여 React 개발자 도구가 읽을 수 있는 디버그 값을 표시한다.
✅ 언제 사용하는지
- 공유 라이브러리의 일부이고 검사하기 어려운 복잡한 내부 데이터를 가진
커스텀 훅에 사용한다.